<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-warn"></i>&nbsp;&nbsp;一个管理员可以有多个角色组,左侧的菜单根据管理员所拥有的权限进行生成</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" style="background: #F0F0F0;border: 0;">
            <el-row :gutter="10">
                <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
                    <div class="grid-content bg-white">
                        <div class="column_title">
                           <h5><i class="el-icon-menu"></i>&nbsp;&nbsp;栏目列表</h5>
                        </div>
                        <div class="column_list column_tree">
                            <el-tree
                                    :data="treeData"
                                    :props="defaultProps"
                                    node-key="id"
                                    ref="tree"
                                    default-expand-all
                                    :expand-on-click-node="false"
                                    @node-click="columnClick">
                            </el-tree>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
                    <div class="grid-content bg-white">
                        <div class="details_list">
                        <div class="handle-box">
                            <el-button  icon="el-icon-refresh" >刷新</el-button>
                            <el-button type="success" icon="el-icon-lx-roundadd" @click="dialogFormVisible = true">添加</el-button>
                            <el-button type="success" icon="el-icon-lx-edit" @click="addVisible = true">编辑</el-button>
                            <el-button
                                    type="primary"
                                    icon="el-icon-delete"
                                    class="handle-del mr10"
                                    @click="delAllSelection"
                            >批量删除</el-button>
                            <el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
                                <el-option key="1" label="广东省" value="广东省"></el-option>
                                <el-option key="2" label="湖南省" value="湖南省"></el-option>
                            </el-select>
                            <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        </div>
                        <el-table
                                :data="tableData"
                                border
                                class="table"
                                ref="multipleTable"
                                header-cell-class-name="table-header"
                        >
                            <el-table-column type="selection" width="50" align="center"></el-table-column>
                            <el-table-column fixed prop="id" label="ID" width="55" align="center"  ></el-table-column>
                            <el-table-column prop="column" label="栏目" width="100"></el-table-column>
                            <el-table-column prop="title" label="文章标题"></el-table-column>
                            <el-table-column label="缩略图" align="center" width="100">
                                <template slot-scope="scope">
                                    <el-image
                                            class="table-td-thumb"
                                            :src="scope.row.image"
                                            :preview-src-list="[scope.row.thumb]"
                                    ></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="page_view" label="浏览" width="80"></el-table-column>
                            <el-table-column prop="comment" label="评论"  width="80"></el-table-column>
                            <el-table-column prop="sort" label="权重"  width="80"></el-table-column>
                            <el-table-column label="状态" align="center" width="80">
                                <template slot-scope="scope">
                                    <el-tag type="success" v-if="scope.row.status =='1'">正常</el-tag>
                                    <el-tag type="danger" v-else>禁用</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="updateTime" label="更新时间"></el-table-column>
                            <el-table-column fixed="right" label="操作" width="180" align="center">
                                <template slot-scope="scope">
                                    <el-button
                                            type="text"
                                            icon="el-icon-edit"
                                            @click="handleEdit(scope.$index, scope.row)"
                                    >编辑</el-button>
                                    <el-button
                                            type="text"
                                            icon="el-icon-delete"
                                            class="red"
                                            @click="handleDelete(scope.$index, scope.row)"
                                    >删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                    background
                                    layout="total, prev, pager, next"
                                    :current-page="query.pageIndex"
                                    :page-size="query.pageSize"
                                    :total="pageTotal"
                            ></el-pagination>
                        </div>
                       </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--添加-->
        <el-dialog title="添加栏目" :visible.sync="dialogFormVisible"  width="35%">
            <el-form :model="form"  ref="form" label-width="100px">
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="基础信息" name="first">
                        <el-form-item label="栏目ID" prop="name" >
                            <el-input v-model="form.name" ></el-input>
                        </el-form-item>
                        <el-form-item label="发布会员" prop="name" >
                            <el-input v-model="form.name" ></el-input>
                        </el-form-item>
                        <el-form-item label="所属专题" prop="name" >
                            <el-input v-model="form.name" ></el-input>
                        </el-form-item>
                        <el-form-item label="文章标题" prop="name" >
                            <el-input v-model="form.name" ></el-input>
                        </el-form-item>
                        <el-form-item label="缩略图" prop="name" >
                            <span style="float: left;width:45%"><el-input v-model="form.image" ></el-input></span>
                            <span style="float: left;width: 50%;padding-left: 15px;">  <el-button size="small" type="primary">点击上传</el-button></span>
                        </el-form-item>
                        <el-form-item label="TAG" prop="name" >
                            <el-input v-model="form.name" ></el-input>
                        </el-form-item>
                        <el-form-item label="自定义URL" prop="name" >
                            <el-input placeholder="请输入内容" v-model="input1">
                                <template slot="prepend">/cms/a/</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="内容" prop="name" >
                            <quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
                        </el-form-item>
                        <el-form-item label="关键字" prop="name" >
                            <el-input v-model="form.name" style="width: 80%"></el-input>
                        </el-form-item>
                        <el-form-item label="描述" prop="name" >
                            <el-input v-model="form.name" style="width: 80%"></el-input>
                        </el-form-item>
                        <el-form-item label="产品列表" prop="name" >
                            <span style="float: left;width: 45%"><el-input v-model="form.image" ></el-input></span>
                            <span style="float: left;width: 50%;padding-left: 15px;">  <el-button size="small" type="primary">点击上传</el-button></span>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="相关信息" name="second">
                        <el-form-item label="浏览" prop="name" >
                            <el-input
                                    suffix-icon="el-icon-lx-attention"
                                    v-model="form.name">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="评论" prop="name" >
                            <el-input
                                    suffix-icon="el-icon-lx-message"
                                    v-model="form.name">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="点赞" prop="name" >
                            <el-input
                                    suffix-icon="el-icon-thumb"
                                    v-model="form.name">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="踩" prop="name" >
                            <el-input
                                    v-model="form.name">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="权重" prop="name" >
                            <el-input
                                    v-model="form.name">
                            </el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="状态" name="third">
                        <el-form-item label="标志" prop="name" >
                            <el-input v-model="form.name" ></el-input>
                        </el-form-item>
                        <el-form-item label="发布时间" prop="name" >
                            <el-date-picker
                                    v-model="value1"
                                    type="datetime"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-switch v-model="form.status"
                                       active-text="正常"
                                       inactive-text="隐藏"
                                       active-value="1"
                                       inactive-value="0"
                            ></el-switch>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import { quillEditor } from 'vue-quill-editor';
    export default {
        components: {
            quillEditor
        },
        data() {
            return {
                treeData: [
                    {
                        id: 1,
                        name: '技术部',
                        level: 1,
                        child: [
                            {
                                id: 2,
                                name: '运维组',
                                level: 2,
                                child: [
                                    {
                                        id: 3,
                                        name: '测试',
                                        level: 3,
                                        child: [
                                            {
                                                id: 4,
                                                name: '前端',
                                                level: 4,
                                                child: [
                                                    {
                                                        id: 5,
                                                        name: '前端',
                                                        level: 4
                                                    }
                                                ]
                                            }
                                        ]
                                    },
                                    {
                                        id: 6,
                                        name: '前端',
                                        level: 4
                                    }
                                ]
                            },
                            {
                                id: 7,
                                name: '测试组',
                                level: 2,
                                child: []
                            }
                        ]
                    }
                ],
                defaultProps: {
                    children: 'child',
                    label: 'name'
                },
                query: {
                    address: '',
                    name: '',
                    pageIndex: 1,
                    pageSize: 10
                },
                tableData: [{
                    id:1,
                    column:'新闻中心',
                    title:'智能WIFI无人机',
                    image:'',
                    page_view:'2641',
                    comment:'651',
                    sort:"23",
                    status:1,
                    updateTime:'2019-12-12 15:31:23'
                }

                ],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                pageTotal: 0,
                form: {},
                idx: -1,
                id: -1,
                dialogFormVisible:false,
                activeName: 'first'

            }
        },
        methods: {
            delAllSelection(){//批量删除

            },
            handleSearch(){//搜索

            },
            columnClick(){//点击栏目切换内容
                let key = this.$refs.tree.getCurrentKey();
                let data =[{
                    id:key,
                    column:'新闻中心-'+key,
                    title:'智能WIFI无人机-'+key,
                    image:'',
                    page_view:'2641',
                    comment:'651',
                    sort:"23",
                    status:1,
                    updateTime:'2019-12-12 15:31:23'
                }];
               this.tableData = data;
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
        },
    }
</script>
<style lang="scss" scoped>
    /deep/ .column_tree {
        .el-tree > .el-tree-node > .el-tree-node__content:first-child {
            &::before,
            &::after {
                border: none;
            }
        }
        .el-tree-node .el-tree-node__content {
            height: 30px;
            &::before,
            &::after {
                content: "";
                position: absolute;
                right: auto;
            }
            &::before {
                border-left: 1px solid #e6e6e6;
                bottom: 50px;
                height: 100%;
                top: 0;
                width: 1px;
                margin-left: -5px;
                margin-top: -15px;
            }
            &::after {
                border-top: 1px solid #e6e6e6;
                height: 20px;
                top: 14px;
                width: 10px;
                margin-left: -5px;
            }
        }
        .el-tree .el-tree-node {
            position: relative;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-white{background: #fff;}
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .crumbs_title{

    }
    .column_title{
        padding: 12px 8px;
        border-bottom: 1px solid #dcdfe6;
    }
    .column_list{padding: 12px 8px}
    .handle-box {

        margin-bottom: 20px;
    }
    .details_list{
        padding: 12px 10px;
    }
    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>
